<template>
  <div>
    <van-cell-group>
      <van-field v-model="telephone" clearable label="telephone"
        right-icon="question-o" placeholder="Please input telephone"
        @click-right-icon="$toast('telephone can not be empty')"/>

      <van-field v-model="password" :right-icon="eye" :type="type"
      label="Password" placeholder="Please input password" @click-right-icon="changeEye"/>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'LRInfoInput',
  data () {
    return {
      telephone: null,
      password: null,
      eye: 'closed-eye',
      type: 'password'
    }
  },
  methods: {
    changeEye () {
      if (this.eye === 'eye-o') {
        this.eye = 'closed-eye'
        this.type = 'password'
      } else {
        this.eye = 'eye-o'
        this.type = 'text'
      }
    }
  },
  updated () {
    this.$emit('Event', { tele: this.telephone, pass: this.password })
  }
}
</script>
<style scoped>
  .van-cell-group{
    width: 90%;
    /* padding: 5px; */
    margin: auto;
  }
  /* .van-cell-group>.van-field{
    margin: 10px;
  } */
</style>
